﻿<template>

  <div class="wish_container">
    <header class="wish_header" ref="wish_header">
      <img src="../../static/img/back_ccc.png" class="back_c"  ref="back_btn"/>
      <span class="wish_header_n">
        进度汇报
      </span>


    </header>
    <div style="height:11.7vw"></div>

    <!-- wish_progress s -->
    <div class="wish_progress_main_progress" ref="wish_progress_main_progress">
       <div class="wish_progress_main_box">
         <div class="wish_pregress_main_box_header">
          <span>广州/学校 </span>

         </div>

         <!-- mains -->
         <div class="main_box_of_wish_p_m">
           <div class="main_box_of_wish_p_m_left">
             <img src="../../static/img/bg_all.png" alt="Alternate Text"
              class="main_box_user_img"
              />
             <p class="main_box_user_img_id">
               12345678
             </p>
             <p class="main_box_user_img_name">
               水绘蓝蒲
             </p>
           </div>
           <div class="main_box_of_wish_p_m_right">
             <div class="main_box_of_wish_p_m_header">

               <img v-bind:src="show_b_img_data" class="main_box_of_wish_p_m_header_img changee_img_1" v-on:click="img_get_f"/>
               <img src="../../static/img/ad_music.jpg" alt="Alternate Text" class="main_box_of_wish_p_m_header_img" v-on:click="get_voice_c"/>

             </div>
             <p class="main_box_of_wish_p_m_right_w">
               <textarea style="width:92%;height:24vw;resize: none;border:0;" ref="content"></textarea>
             </p>
             <div class="bottom_btn clearfix">
               <div class="certain_btn" v-on:click="up_Load">
                 确定
               </div>

             </div>
           </div>

         </div>
         <!-- maine -->

       </div>
    </div>


    <!-- wish_progress e -->
    <!--input file s-->
    <input type="file" ref="file" style="display: none;">

    <!--input file e-->
  </div>

</template>

<script>
  import '../../static/css/FooterMenu.css';
  import { mapState, mapMutations, mapActions } from 'vuex';
  import store from '../vuex/store_index';
  import common from "../common/common.js"
  import use_rem from "../../static/js/use_rem.js"
  import { Toast, Indicator } from 'mint-ui';
  import qs from 'qs';
  import Vue from "vue";
  import axios from 'axios'
  Vue.prototype.$http = axios;
  use_rem();
  export default {
    name: 'FooterMenu',
    data() {
      return {
        menu_list: this.$store.getters.get_footer_menu_list,
        sign_c: true,
        show_b_img_data:"../../static/img/img_fffff.png",
        voice_data:"",
        img_Data:""
      }
    },
    computed: mapState([
      'footer_menu_list'
    ]),
    methods: {
      ...mapActions(['redirect']),
      img_get_f:function () {
        this.$refs.file.click();
      },
      jump: function (name) {
        let id = name.replace("./", "");
        //关闭所有 webview
        let all = plus.webview.all();
        console.log("all________________________________");
        console.log(all);
        //current webview
        var curr = plus.webview.currentWebview();
        for (let i = 0, len = all.length; i < len; i++) {
          //关闭除setting页面外的其他页面
          if (all[i].getURL() == curr.getURL())
            continue;
          plus.webview.close(all[i]);
        }

        mui.openWindow({
          url: name,
          id: id,
          createNew: false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
          show: {
            autoShow: true,//页面loaded事件发生后自动显示，默认为true
            aniShow: "zoom-fade-in",//页面显示动画，默认为”slide-in-right“；
          },
          waiting: {
            autoShow: true,//自动显示等待框，默认为true
            title: '正在加载...',//等待对话框上显示的提示内容
          }
        })

      },
      up_load:function () {
//        /api/user/wish/addWishSchedule
        Indicator.open();
        this.$http.post('/yizhiweimen/api/user/wish/addWishSchedule',

          {
            'content': this.$refs.input_wish_main.value,
            "user.id":sessionStorage.getItem("user_id"),
            "wish.id":sessionStorage.getItem("wish_detail_id")
          }
          , {
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            }
          }
        )
          .catch((thrown) => {
            Indicator.close();
          }).then((e) => {
          Indicator.close();

        })
      },
      get_voice_c:function () {
        common.get_voice(wx,this,qs)
      },
      up_load_ff:function () {
          console.log("11111111111111111111")
        this.$http.post('/yizhiweimen/api/user/wish/addWishSchedule',
          {
            "content": this.$refs.content.value,
            "file":this.img_Data +","+this.voice_data,
            "user":{id:sessionStorage.getItem("user_id")},
            "wish":{id:sessionStorage.getItem("wish_detail_id")}
          }  , {
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            }
          }
        )
          .catch((thrown) => {
            Indicator.close();
            console.log(thrown);
          }).then((e) => {
          Indicator.close();
          Toast({
            message: "上传成功",
            position: 'bottom',
            duration: 2000
          });
          //common.go_b();
        })
      },
      up_Load:function () {
        Indicator.open();
        this.up_load_img(this.up_load_ff)

      },
      up_load_img:function (cb) {
        let formData = new FormData();
        formData.append("files", this.$refs.file.files[0]);
        this.$http.post('/yizhiweimen/api/user/activity/upload',
          formData
        )
          .catch((thrown) => {
            Indicator.close();
            console.log(thrown);
          }).then((e) => {
          Indicator.close();
          this.img_Data = e.data.fileUrl;
          cb();
        })
      }
    },
    mounted: function () {
      //    this.$store.getters.Get_Bot_C_obj
      let wish_header = window.getComputedStyle(this.$refs.wish_header, "height").height.replace("px", "");
      let main_h = document.body.clientHeight;
      this.$refs.wish_progress_main_progress.style.height = main_h - parseInt(wish_header) + "px"

      common.get_img(this,qs);
      common.wx_config_voice(this,qs,Indicator,wx);
      common.go_back(this);
    }
  }
</script>
<!--inner style for thom template-->
<style>
  html.body {
    background-color: #eeeeee;

  }
</style>
<style scoped>
  .certain_btn{
    width: 20vw;
    height:8vw;
    border-radius: 2vw;
    line-height: 8vw;
    font-size:4vw;
    text-align: center;
    color:#fff;
    float:right;
    margin-bottom: 2vw;
    margin-right: 6vw;
    background-color: #2ac845;
  }
  .main_box_of_wish_p_m_header .main_box_of_wish_p_m_header_img {
    width: 10vw;
    height: 7.3vw;
  }
  /*main_box_of_wish_p_m*/
  .changee_img_1{

  }
  .wish_p_box_input_box {
    border-top: 1px solid #aaaaaa;
    padding-top: 1vw;
  }
  .wish_comment_input_certain_btn {
    display: inline-block;
    width: 12.2vw;
    height: 5.3vw;
    line-height: 5.3vw;
    border-radius: 2vw;
    background-color: #aaaaaa;
    color: #fff;
    text-align: center;
  }
  .wish_p_box_input {
    width: 61vw;
    border: 1px solid #aaaaaa;
    border-radius: 2vw;
    height: 4.8vw;
    line-height: 4.8vw;
    margin-left: 15vw;
  }
  .comment_show_box_w {
    vertical-align: super;
  }
  .maohao1 {
    margin-right: 3vw;
    vertical-align: middle;
    vertical-align: super;
    width:72vw;
  }
  .wish_p_box_comment {
    padding: 0.8vw 0;
    text-align: left;
    font-size: 3vw;
    color: #aaaaaa;
  }
  .comment_show_box_list{
    width:5vw;
    height:5vw;
    border-radius:2vw;
    margin-right:3vw;
    margin-left:4.2vw;
  }
  .main_box_of_wish_p_m_right_w {
    padding-left: 5vw;
    padding-right: 5vw;
    line-height: 5.06vw;
    font-size: 3.2vw;
    text-indent: 7.7vw;
    color: #a0a0a0;
    text-align: left;
    margin-top: 2vw;
  }
  .main_box_of_wish_p_m_header_img {
    height: 22.4vw;
    width: 22.4vw;
    border-radius: 2vw;
  }
  .main_box_of_wish_p_m_right {
    width: 78.6vw;
    height: 49.4vw;
    border-radius:0 0 2vw 0;
  }
  .main_box_of_wish_p_m_header{
    width:100%;
    margin-top:2.4vw;
    display:flex;
    justify-content:space-around;
    border-bottom: 1px solid #eee;
    padding-bottom: 4vw;
  }
  .main_box_user_img_name {
    text-align: center;
    font-size: 3vw;
    color: #aaaaaa;
    text-align: center;
    margin-bottom: 1.7vw;
  }
  .main_box_user_img_id {
    text-align: center;
    font-size: 3vw;
    color: #aaaaaa;
    text-align: center;
    margin-bottom: 1.7vw;
  }
  .main_box_of_wish_p_m_left {
    width: 15vw;
    border-right: 1px solid #ededed;
    height: 51.4vw;
    border-radius: 0 0 0 2vw;
  }
  .main_box_user_img{
    width:10.2vw;
    height:10.2vw;
    border-radius:2vw;
    margin:2.1vw auto 1.7vw;
  }
  .main_box_of_wish_p_m {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #ededed;
  }
  /*main_box_of_wish_p_m*/
  .arrow_bottom_list_box_img {
    width: 4.6vw;
    display: inline-block;
  }
  .arrow_bottom_list_box {
    height: 8.9vw;
    line-height: 8.9vw;
    width: 100%;
    border-radius: 2vw;
    text-align: center;
    font-size: 3vw;
    color: #fff;
  }
  .arrow_bottom_list {
    width: 22.2vw;
    height: 52.2vw;
    border-radius: 2vw;
    background-color: #b17955;
    position:absolute;
    right:0;
    top:7vw;
  }
  .wish_progress_main_box {
    margin: 2.9vw auto 0;
    width: 94vw;
    background-color: #fff;
    box-shadow:2px 2px 4px 2px #aaaaaa;
    border-radius:2vw;
  }
  .arrow_bottom {
    width: 4.8vw;
    height: 4.9vw;
    transform: rotate(-90deg);
    vertical-align:sub;
    margin-left:13vw;

  }
  .wish_pregress_main_box_header {
    height: 7.7vw;
    line-height: 7.7vw;
    font-size: 3vw;
    color: #fff;
    border-radius: 2vw 2vw 0 0;
    background-color: #9f5c2f;
    position:relative;
  }
  .wish_progress_main_progress {
    width: 100vw;
    height: 70.4vw;
    border-radius: 2vw;

  }
  .wish_progress_input {
    width: 42.4vw;
    height: 7.6vw;
    line-height: 7.6vw;
    border-radius: 2vw;
    border: 0;
  }
  .input_wish_header_b_btn {
    width: 16.5vw;
    line-height: 6.4vw;
    height: 6.4vw;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 50%;
    border-radius: 2vw;
    font-size: 3.5vw;
  }

  .input_wish_header_b_btn_1 {
    right: 22vw;
    transform: translateY(-50%);
    background-color: #959595;
  }

  .input_wish_header_b_btn_2 {
    right: 3.4vw;
    transform: translateY(-50%);
    background-color: #80c26a;
  }

  .input_wish_header_bottom {
    height: 9.7vw;
    line-height: 9.7vw;
    border-radius: 0 0 2vw 2vw;
    position: relative;
  }

  .input_wish_input_img {
    width: 16.9vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  .wish_header {
  }

  .input_wish_header_middle_img {
    height: 41.8vw;
    width: 100%;
    position: relative;
    border-bottom: 1px solid #eaeaea;
  }

  .input_wish_header_header {
    border-bottom: 1px solid #eaeaea;
    height: 8.4vw;
    line-height: 8.4vw;
    text-align: center;
    color: #9f5c2f;
    font-size: 4vw;
    border-radius: 2vw 2vw 0 0;
  }

  .wish_container {
    height: auto;
    background-color: #eeeeee;
  }
  /*input_wish_header s*/
  .input_wish_header {
    width: 94vw;
    border-radius: 2vw;
    height: 60.6vw;
    margin: 2.6vw auto;
    background-color: #fff;
    border-radius: 2vw;
  }
  /*input_wish_header e*/
  /*al_read_send_btn s*/
  .al_read_send_btn {
    width: 21.6vw;
    height: 7.3vw;
    line-height: 7.3vw;
    text-align: center;
    border-radius: 2vw;
    color: #fff;
    background-color: #d84848;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 4vw;
    transform: translateY(-50%);
  }
  /*al_read_send_btn e*/
  /*wish_mid*/
  .wish_main {
    overflow-y: scroll;
    background-color: #eeeeee;
  }

  .wish_mid_wish .wish_mid_act_btn {
    color: #9f5c2f
  }

  .wish_mid_wish {
    height: 8.8vw;
    line-height: 8.8vw;
    color: #b5b5b5;
    font-size: 3vw;
    text-align: center;
    display: flex;
    justify-content: space-around;
  }

  .wish_header_title {
    text-align: right;
  }

  .wish_header_w {
    text-indent: 6vw;
  }

  .wish_mid_right {
    line-height: 1.2;
    font-size: 3.5vw;
    text-align: left;
    color: #9f5c2f;
    width: 66vw;
    height: 13.2vw;
    background-color: #fff;
    border-radius: 2vw;
    margin-top: 2.1vw;
    padding: 3vw;
  }

  .wish_seed {
    width: 16.6vw;
    display: block;
    padding-left: 4.8vw;
    padding-top: 3.4vw;
    height: 15.3vw;
    margin-right: 3.2vw;
  }

  .wish_mid {
    display: flex;
    height: 23.2vw;
    background-color: #eeeeee;
  }
  /*wish_mid*/
  .add_wish {
    width: 18vw;
    height: 7.2vw;
    line-height: 7.2vw;
    color: #fff;
    font-size: 3.5vw;
    border-radius: 2vw;
    background-color: #d84848;
    margin-left: 2.5vw;
    display: inline-block;
    text-align: center;
  }

  .input_search {
    width: 42vw;
    height: 7.2vw;
    line-height: 7.2vw;
    color: #9f5c2f;
    border-radius: 2vw;
    margin-left: 18vw;
    border: 0;
  }

  .wish_header {
    height: 11.7vw;
    line-height: 11.7vw;
    color: #fff;
    font-size: 4vw;
    background-color: #9f5c2f;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
  }

  .wish_header_n {
    font-size: 4.5vw;
    color: #fff;
    position:absolute;
    top:50%;
    left:6.9vw;
    transform:translateY(-50%);
  }

  .back_c {
    height: 6vw;
    width: 5vw;
    position: absolute;
    top: 50%;
    left: 1.3vw;
    transform: translateY(-50%);
  }
</style>
